<%@include file="header.jsp" %>
<link rel="stylesheet" href="<c:url value="/css/main.css" />">
<link rel="stylesheet" href="<c:url value="/css/responsive-slider-parallax.css" />">
<script type="text/javascript" src="<c:url value="/js/jquery.event.move.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/responsive-slider.js"/>"></script>
<div class="main-body">
    <%@include file="search.jsp" %>
     <div class="slider-container">
        <div class="parallax-slider">
            <div class="slider-border top-bottom">
                <div class="responsive-slider-parallax" data-spy="responsive-slider" data-parallax="true"
                     data-parallax-direction="1">
                    <div class="slides-container" data-group="slides">
                        <ul>
                            <li>
                                <div class="slide-body" data-group="slide">
                                    <div class="container">
                                        <div class="wrapper">
                                            <div class="caption header" data-animate="slideAppearRightToLeft"
                                                 data-delay="500" data-length="300">
                                                <h2>Rental Flats</h2>

                                                <div class="caption sub" data-animate="slideAppearLeftToRight"
                                                     data-delay="800" data-length="300">Anywhere in the world
                                                </div>
                                            </div>
                                            <div class="caption flat-rental" data-animate="slideAppearLeftToRight"
                                                 data-delay="200">
                                                <img src="<c:url value="/images/flat-rent1-01.png"/>"/>
                                            </div>
                                            <div class="caption map-icon" data-animate="slideAppearLeftToRight">
                                                <img src="<c:url value="/images/Map_Icon.png"/>"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="slide-body" data-group="slide">
                                    <div class="container">
                                        <div class="wrapper">
                                            <div class="caption header" data-animate="slideAppearRightToLeft"
                                                 data-delay="500" data-length="300">
                                                <h2>Prices for everyone</h2>

                                                <div class="caption sub" data-animate="slideAppearLeftToRight"
                                                     data-delay="800" data-length="300">Different payment systems
                                                </div>
                                            </div>
                                            <div class="caption pay-rental" data-animate="slideAppearDownToUp"
                                                 data-delay="200">
                                                <img src="<c:url value="/images/PayRent.png"/>"/>
                                            </div>
                                            <div class="caption credit-card" data-animate="slideAppearUpToDown">
                                                <img src="<c:url value="/images/credit-card-icon.png"/>"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="slide-body" data-group="slide">
                                    <div class="container">
                                        <div class="wrapper">
                                            <div class="caption header" data-animate="slideAppearRightToLeft"
                                                 data-delay="500" data-length="300">
                                                <h2>Daily rent</h2>

                                                <div class="caption sub" data-animate="slideAppearLeftToRight"
                                                     data-delay="800" data-length="300">Fast processing
                                                </div>
                                            </div>
                                            <div class="caption clock-img" data-animate="slideAppearDownToUp"
                                                 data-delay="200">
                                                <img src="<c:url value="/images/Clock-icon.png"/>"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="pages">
                        <a class="page" href="#" data-jump-to="1">1</a>
                        <a class="page" href="#" data-jump-to="2">2</a>
                        <a class="page" href="#" data-jump-to="3">3</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
